<template>
    <div class="myHeaderContainer" style="z-index: 10">
        <el-row class="myHeaderTop">
            <el-col :span="12" class="myTitle">智慧物业综合运营管理平台</el-col>
            <el-col :span="12">
                <!-- 用户信息 start -->
                <el-dropdown class="myUserInformation" @command="onUserSelect">
          <span class="el-dropdown-link">
            <img alt="" src="static/images/timg.jpg" class="myUserIcon" v-if="userIcon==null||userIcon==''"/>
            <img alt="" :src="userIcon" class="myUserIcon" v-else/>
              <span class="userName" :title="userName">{{userName}}</span>
              <span v-if="dutyName.length>0" class="dutyName" :title="dutyName">{{dutyName}}</span>
          </span>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item command="0">小区切换</el-dropdown-item> -->
                        <el-dropdown-item command="1"><i class="el-icon-edit-outline"></i>   修改信息</el-dropdown-item>
                        <el-dropdown-item command="2" divided="true"><i class="el-icon-setting"></i>   用户注销</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!-- 用户信息 end -->
                <!-- 紧急消息 start-->
                <!-- <el-dropdown class="myPrompt" @command="onSelect">
                  <span class="el-dropdown-link">
                    <el-badge :value="promptNum">
                      <i class="el-icon-bell myIcon"></i>
                    </el-badge>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item disabled>
                      <el-row :gutter="10">
                        <el-col :span="18">
                          您有{{promptNum}}个紧急消息
                        </el-col>
                        <el-col :span="6">
                          查看全部
                        </el-col>
                      </el-row>
                    </el-dropdown-item>
                    <el-dropdown-item divided></el-dropdown-item>
                    <el-dropdown-item v-for="(item,index) in msgList" :command="index">
                      <el-row :gutter="10">
                        <el-col :span="2">
                          <i class="el-icon-info"></i>
                        </el-col>
                        <el-col :span="16">
                          {{item.content}}
                        </el-col>
                        <el-col :span="6">
                          {{item.time}}
                        </el-col>
                      </el-row>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown> -->
                <!-- 紧急消息 end -->
            </el-col>
        </el-row>
        <el-row class="myHeaderBottom">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="myBreadcrumb">
                <el-breadcrumb-item v-if='navdata.length<=0'>{{defaultNavData}}</el-breadcrumb-item>
                <el-breadcrumb-item v-for="x in navdata">{{x}}</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <audio src="static/audio/1.mp3" style="display: none;" id="mp3"></audio>
    </div>
</template>


<style scoped>
    /*改变头部标题字体样式 引用的提示是方正中艺简体  start*/
    @font-face {
        font-family: "fzzzjt";
        src: local("fzzzjt"), url(/static/css/fonts/fzzzjt10.ttf) format("truetype");
    }

    /*改变头部标题字体样式  end*/
    .myHeaderContainer {
        margin-left: 235px;
        width: 100%;
        min-width: 1200px;
        position: fixed;
        z-index: 10;
        box-sizing: border-box;
        padding-right: 235px;
        top: 0;
    }

    .myHeaderTop {
        width: 100%;
        height: 60px;
        background: #ededed;
    }

    .myHeaderBottom {
        width: 100%;
        height: 30px;
        background: #e9e9e9;
    }

    .myTitle {
        font-family: "fzzzjt";
        color: #2c3e4f;
        font-weight: normal;
        font-size: 28px;
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
    }

    .myBreadcrumb {
        line-height: 30px;
        height: 30px;
        font-size: 12px;
        font-family: "fzzzjt";
        box-sizing: border-box;
        border-top: 1px solid #e5e5e5;
        padding-left: 20px;
    }

    .myPrompt {
        position: relative;
        float: right;
        right: 50px;
        top: 15px;
    }

    .el-dropdown-menu {
        width: 200px;
    }

    .myUserInformation {
        position: relative;
        float: right;
        right: 20px;
        top: 15px;
    }

    .myUserIcon {
        border-radius: 50% !important;
        width: 29px;
        height: 29px;
        vertical-align: sub;
    }

    .userName {
        text-align: center;
        overflow-x: hidden;
        width: 58px;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        color: #303133;
    }

    .dutyName {
        overflow-x: hidden;
        width: auto;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        color: #F56C6C;
    }

    .myIcon {
        font-size: 20px;
        margin-top: 6px;
    }
</style>
<script>
    import {getOrderList} from "@/api/online";

    export default {
        data() {
            return {
                defaultNavData: '首页',
                msgList: [
                    {content: "消息1", time: "12月1日"},
                    {content: "消息1", time: "12月1日"},
                    {content: "消息1", time: "12月1日"},
                    {content: "消息1", time: "12月1日"},
                    {content: "消息1", time: "12月1日"}
                ],
                promptNum: 5,
                userName: "",
                userIcon: "",
                userId: "",
                dutyName: "",
                deptName: "",
                interval: null
            }
        },
        mounted() {
            let vm = this;
            let userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
            this.userName = userInfo.user_name;
            this.userIcon = userInfo.avatar;
            this.userId = userInfo.user_id;
            this.dutyName = userInfo.duty_name;
            this.deptName = userInfo.dept_name;
            console.log(this.deptName, this.dutyName);

            vm.interval = setInterval(function () {
                vm.onGetOrderList();
            }, 30 * 1000);
        },
        beforeDestory: function () {
            console.log("销毁");
            clearInterval(this.interval);
        },
        methods: {
            onSelect(command) {
                console.log(command)
            },
            onUserSelect(conmmand) {//0:小区切换 1:修改信息 2:注销
                let vm = this;
                if (conmmand == 1) {//修改信息
                    vm.$router.push({
                        path: "/ygglComonents",
                        query: {
                            type: "update",
                            id: vm.userId,
                            op: "home"
                        }
                    })
                }
                if (conmmand == 2) {//注销
                    vm.$router.push({
                        path: "/login"
                    });
                    localStorage.clear();//清空本地所有缓存
                    window.location.reload();
                }
            },
            onGetOrderList() {//拉取订单列表
                let vm = this;
                const params = {
                    rows: 1,
                    page: 1,
                    ORDERNO: "",
                    start: "",
                    end: "",
                    TYPE: 1,
                    URGESTATUS: "",
                    ORDERSTATUS: 0,
                    ORDERTYPE: ""
                }
                getOrderList(params)
                    .then(response => {
                        let res = response.data.rows;
                        if (res.length > 0) {
                            document.getElementById("mp3").play();
                            vm.$notify.info({
                                title: '订单信息',
                                message: '您有未确认的订单，请到订单管理页面进行处理！',
                                position: 'bottom-right'
                            });
                        }
                    })
                    .catch(error => {
                    });
            }
        },
        props: ['navdata']
    }
</script>
